<template>
    <div>
        <mj-title type="h2" title="Image 图片"></mj-title>
        <div class="page-desc">图片容器，在保留原生img的特性下，支持自定义占位、加载失败等</div>
        <mj-title type="h5" title="基础使用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div style="display:flex;justify-content: space-around;">
                    <div class="block" v-for="fit in fits" :key="fit">
                        <span class="demonstration">{{ fit }}</span>
                        <mj-image style="width: 100px; height: 100px" :src="url" :fit="fit">
                        </mj-image>
                    </div>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
					<code class="language-html line-numbers">
&lt;template>
    &lt;div>
        &lt;div class="block" v-for="fit in fits" :key="fit">
            &lt;span class="demonstration"> fit &lt;/span>
            &lt;mj-image
            style="width: 100px; height: 100px"
            :src="url"
            :fit="fit">&lt;/mj-image>
        &lt;/div>
    &lt;/div>
&lt;/template>
&lt;script>
	export default {
		data () {
			return {
				fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
                url: 'https://i.loli.net/2017/08/21/599a521472424.jpg'
			}
		}
	}
&lt;/script>
</code>
				</pre>
            </mj-tab-pane>
        </mj-tabs>



        <mj-title type="h5" title="占位内容"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div class="demo-image">
                    <div class="block">
                        <span class="demonstration">默认</span>
                        <mj-image :src="src"></mj-image>
                    </div>
                    <div class="block">
                        <span class="demonstration">自定义</span>
                        <mj-image :src="src">
                            <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                            </div>
                        </mj-image>
                    </div>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
					<code class="language-html line-numbers">
&lt;template>
    &lt;div>
        &lt;div class="demo-image">
            &lt;div class="block">
                &lt;span class="demonstration">默认&lt;/span>
                &lt;mj-image :src="src">&lt;/mj-image>
            &lt;/div>
            &lt;div class="block">
                &lt;span class="demonstration">自定义&lt;/span>
                &lt;mj-image :src="src">
                    &lt;div slot="placeholder" class="image-slot">
                        加载中&lt;span class="dot">...&lt;/span>
                    &lt;/div>
                &lt;/mj-image>
            &lt;/div>
        &lt;/div>
    &lt;/div>
&lt;/template>
&lt;script>
	export default {
		data () {
			return {
				src: 'https://i.loli.net/2017/08/21/599a521472424.jpg'
			}
		}
	}
&lt;/script>
</code>
				</pre>
            </mj-tab-pane>
        </mj-tabs>


        <mj-title type="h5" title="加载失败"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div class="demo-image">
                    <div class="block">
                        <span class="demonstration">默认</span>
                        <mj-image></mj-image>
                    </div>
                    <div class="block">
                        <span class="demonstration">自定义</span>
                        <mj-image>
                            <div slot="error" class="image-slot">
                                <Icon type="image" size="30" />
                            </div>
                        </mj-image>
                    </div>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;div>
        &lt;div class="demo-image">
            &lt;div class="block">
                &lt;span class="demonstration">默认&lt;/span>
                &lt;mj-image>&lt;/mj-image>
            &lt;/div>
            &lt;div class="block">
                &lt;span class="demonstration">自定义&lt;/span>
                &lt;mj-image>
                    &lt;div slot="error" class="image-slot">
                        &lt;Icon type="image" size="30"/>
                    &lt;/div>
                &lt;/mj-image>
            &lt;/div>
        &lt;/div>
    &lt;/div>
&lt;/template>
&lt;script>
	export default {
		data () {
			return {
				src: 'https://i.loli.net/2017/08/21/599a521472424.jpg'
			}
		}
	}
&lt;/script>
</code>
				</pre>
            </mj-tab-pane>
        </mj-tabs>



        <mj-title type="h5" title="API"></mj-title>
		<mj-title type="h6" title="Image 参数"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>src</td>
					<td>图片源，同原生</td>
					<td>string</td>
					<td>-</td>
				</tr>
				<tr>
					<td>fit </td>
					<td>确定图片如何适应容器框，同原生 object-fit [fill | contain | cover | none | scale-down]</td>
					<td>string</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Image 事件"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>事件名</th>
					<th>说明</th>
					<th>返回值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>load</td>
					<td>图片加载成功触发</td>
					<td>(e: Event)</td>
				</tr>
				<tr>
					<td>error</td>
					<td>图片加载失败触发</td>
					<td>(e: Error)</td>
				</tr>
                <tr>
					<td>on-image</td>
					<td>点击图片时触发</td>
					<td>(e: Event)</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Image Slots"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>名称</th>
					<th>说明</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>placeholder</td>
					<td>图片未加载的占位内容</td>
				</tr>
				<tr>
					<td>error</td>
					<td>加载失败的内容</td>
				</tr>
			</tbody>
		</table>
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
            url: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
            src: 'https://i.loli.net/2017/08/21/599a521472424.jpg'
        }
    },
    created() {
    },
    mounted() {
    },
}
</script>

<style>
.demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
}

.demo-image {
    display: flex;
    justify-content: space-around;
}

.demo-image .mj-image {
    width: 300px;
    height: 200px
}

.block {
    padding: 30px 0;
    text-align: center;
    border-right: 1px solid #eff2f6;
    box-sizing: border-box;
    vertical-align: top;
}

.image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
}
</style>
